<template>
  <div>
    <div class="header">开通特约商户</div>
    <div class="content">
      <a-steps style="margin-bottom:40px;" :current="getCurrentStep()">
        <a-step title="业务配置" description />
        <a-step v-if="!infoMod" title="信息填写" description />
        <a-step v-if="infoMod" style="cursor: pointer;" @click="goPage(2)" title="信息填写" description='点击修改' />
        <a-step title="资料上传" description />

        <!-- <a-step
          v-if="infoMod"
          style="cursor: pointer;"
          @click="goPage(3)"
          title="资料上传"
          description
        /> -->
        <a-step title="初审" description />
        <a-step title="协议签署" description />
        <a-step title="技术集成" description />
      </a-steps>
      <router-view :key="key" />
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        infoMod: false
      };
    },
    mounted() {
      //   this.$message.success('This is a message of success');
      // TODO
      // get register status
      // this.$router.push("/PersonRegister/step"+st);
    },
    computed: {
      key() {
        return this.$route.path + Math.random();
      }
    },
    watch: {
      $route(to, from) {
        if (to.path == "/SpeCustomer/step3") {
          console.log("路由地址改变");
          this.infoMod = true;
        } else if (to.path == "/SpeCustomer/step2") {
          this.infoMod = false;
        } else if (to.path == "/SpeCustomer/step4") {
          this.infoMod = false;
        }
        else {
        }
      }
    },
    methods: {
      getCurrentStep() {
        const pathname = this.$route.path;
        const pathList = pathname.split("/");
        var step = pathList[pathList.length - 1];
        if (step && step.indexOf("step") >= 0) {
          let s = step.replace("step", "");
          if (s) {
            return parseInt(s) - 1;
          }
        }
        return 0;
      },
      goPage(st) {
        this.$router.push({
          path: "/SpeCustomer/step" + st,
          query: { modify: true }
        });
      }
    }
  };
</script>
<style scoped>
  .header {
    background: lightgray;
    padding: 10px;
    text-align: center;
    font-weight: 600;
    color: #52506b;
    font-size: 16px;
  }

  .content {
    width: 90%;
    margin: 0 auto;
    padding: 20px;
  }
</style>